<template>
	<view class="main">
		<u-navbar class="topBar" :placeholder="true" :autoBack="true" fixed>
			<view class="u-nav-slot" slot="right">
				<u-search class="search_input" :placeholder="hotSearchStr" prefixIcon="search" v-model="inputValue"
					@search="search(inputValue)" confirm-type="search" :show-action="false" :focus="isInputFocus">
				</u-search>

			</view>
			<view class="u-nav-slot" slot="right">
				<span style="color: #666666;" @click="search(inputValue)">搜索</span>
			</view>
		</u-navbar>

		<view class="searchTips">
			<view class="historyTips" v-if="historyList.length > 0">
				<view class="title">历史搜索</view>
				<image class="historyDelete" src="../../static/img/wenTiKu/ic_delete.png" @click="deleteHistory()">
				</image>
			</view>

			<view v-if="historyList.length > 0">
				<view class="type_item flex_center_align" v-for="(item, index) in historyList" @click="search(item)" :key="index">
					{{ item }}
				</view>
			</view>
			<template v-if="hotList.length > 0">
				<view class="title" style="margin-top: 30rpx;">热门搜索</view>
				<view class="type_item flex_center_align" v-for="(item, index) in hotList" @click="search(item.content)"
					:key="index">
					<view>
						<image :src="hotIcon" class="hotIcon"></image>
						{{ item.content }}
					</view>
				</view>
			</template>
		</view>

	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/problemBase/search"></script>

<style lang="scss" scoped>
page {
	background: #fff !important;
}

.main {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	background: #fff !important;

	.topBar {
		flex-shrink: 0;
		float: none;

		.search_input {
			position: relative;
			right: 20rpx;
			width: 542rpx;
			height: 100%;
			background: #F3F3F3;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: transparent;
		}
	}

	.searchTips {
		margin-top: 20rpx;
		flex-shrink: 0;
	}

	.historyTips {
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.historyDelete {
			width: 50rpx;
			height: 50rpx;
			padding: 10rpx;
			margin-right: 30rpx;
		}
	}

	.title {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 700;
		color: #333333;
		margin-left: 30rpx;
	}

	.type_item {
		display: inline-block;
		margin: 24rpx 20rpx 0 0;
		padding: 0 30rpx;
		max-width: 100%;
		min-height: 56rpx;
		line-height: 56rpx;
		background: #F8F9FA;
		border-radius: 28rpx;
		font-size: 22rpx;
		color: #666666;
	}

	.hotIcon {
		width: 30rpx;
		height: 30rpx;
	}
}

/deep/ .u-navbar--fixed {
	background: #fff;
}
</style>